import * as Updates from 'expo-updates';
import { useEffect } from 'react';
import { View, Text, ScrollView, Image, Alert } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';

export default function HomeScreen() {
  useEffect(() => {
    checkForUpdates();
  }, []);

  async function checkForUpdates() {
    try {
      const update = await Updates.checkForUpdateAsync();
      if (update.isAvailable) {
        Alert.alert('发现新版本', '是否立即更新到最新版本？', [
          {
            text: '稍后更新',
            style: 'cancel',
          },
          {
            text: '立即更新',
            onPress: async () => {
              try {
                await Updates.fetchUpdateAsync();
                await Updates.reloadAsync();
              } catch (error) {
                Alert.alert('更新失败', '请稍后重试');
              }
            },
          },
        ]);
      }
    } catch (error) {
      console.error('检查更新失败:', error);
    }
  }

  return (
    <SafeAreaView className="flex-1 bg-gray-50">
      <ScrollView className="flex-1">
        {/* 顶部标题栏 */}
        <View className="p-4 bg-white border-b border-gray-200 shadow-sm">
          <Text className="text-2xl font-bold text-gray-800">首页</Text>
        </View>

        <View className="p-4">
          {/* 欢迎卡片 */}
          <View className="bg-white rounded-xl p-6 mb-4 shadow-lg">
            <View className="flex-row items-center mb-4">
              <View className="w-12 h-12 bg-blue-100 rounded-full items-center justify-center mr-3">
                <Text className="text-2xl text-blue-600">👋</Text>
              </View>
              <View>
                <Text className="text-xl font-bold text-gray-800">欢迎使用</Text>
                <Text className="text-sm text-gray-500">开始您的探索之旅</Text>
              </View>
            </View>
            <Text className="text-base text-gray-600 leading-6">
              这是一个使用 Expo 和 React Native
              构建的现代化应用，为您提供流畅的用户体验和精美的界面设计。
            </Text>
          </View>

          {/* 功能特点卡片 */}
          <View className="bg-white rounded-xl p-6 shadow-lg">
            <Text className="text-xl font-bold text-gray-800 mb-4">功能特点</Text>
            <View className="space-y-3">
              <View className="flex-row items-center">
                <View className="w-8 h-8 bg-green-100 rounded-full items-center justify-center mr-3">
                  <Text className="text-green-600">✓</Text>
                </View>
                <Text className="text-base text-gray-600">底部导航栏</Text>
              </View>
              <View className="flex-row items-center">
                <View className="w-8 h-8 bg-blue-100 rounded-full items-center justify-center mr-3">
                  <Text className="text-blue-600">✓</Text>
                </View>
                <Text className="text-base text-gray-600">响应式布局</Text>
              </View>
              <View className="flex-row items-center">
                <View className="w-8 h-8 bg-purple-100 rounded-full items-center justify-center mr-3">
                  <Text className="text-purple-600">✓</Text>
                </View>
                <Text className="text-base text-gray-600">现代化UI设计</Text>
              </View>
            </View>
          </View>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}
